<!-- StrategyList.svelte -->
<script lang="ts">
	import type { PageData } from './$types'
	import { goto } from '$app/navigation'
	import { Pane, Splitpanes } from 'svelte-splitpanes'
	import {
		Tabs,
		TabItem,
		Table,
		TableBody,
		TableBodyCell,
		TableBodyRow,
		TableHead,
		TableHeadCell,
		Checkbox,
		TableSearch,
		ImagePlaceholder,
	} from 'flowbite-svelte'
	import { slide } from 'svelte/transition'

	import {
		UserCircleSolid,
		GridSolid,
		AdjustmentsVerticalSolid,
		ClipboardSolid,
	} from 'flowbite-svelte-icons'
	import type { FudaHistory } from '$lib/bindings'
	export let data: PageData

	// Computed property to get the desired folder object
	// let solutions = data.history[43000372003].folders[43000587405].solutions

	let searchTerm = ''

	let openRow: any
	let details

	const toggleRow = (i: any) => {
		openRow = openRow === i ? null : i
	}

	function click_row(hitem: FudaHistory): void {
		console.log('click_row history item: ', hitem)
		if (hitem.entity_type === 'SECURITY') {
			goto(`/securities/${hitem.entity_id}`)
		} else if (hitem.entity_type === 'TBOT') {
			goto(`/tbots/${hitem.entity_id}`)
		}
	}
</script>

<div class="bg-gray-200 w-full h-svh overflow-y-auto">
	<Tabs style="underline" contentClass="p-0 bg-gray-50  dark:bg-gray-800 mt-0">
		<TabItem open>
			<div slot="title" class="flex items-center gap-2">
				<UserCircleSolid size="sm" />
				All History
			</div>
			<Splitpanes>
				<Pane size={65}>
					<div class="overflow-auto w-full h-full flex flex-col">
						<TableSearch
							placeholder="Search by maker name"
							hoverable={true}
							bind:inputValue={searchTerm}
						>
							<TableHead defaultRow={false}>
								<tr
									class="bg-gray-400 text-left font-medium text-gray-900 uppercase sticky top-0 z-10"
								>
									<TableHeadCell>实体类型</TableHeadCell>
									<TableHeadCell>实体编号</TableHeadCell>
									<TableHeadCell>访问时间</TableHeadCell>
								</tr>
							</TableHead>
							<TableBody tableBodyClass="divide-y">
								{#each data.history as hitem, index (hitem.id)}
									<TableBodyRow class=" hover:bg-green-400" on:click={() => click_row(hitem)}>
										<TableBodyCell>{hitem.entity_type}</TableBodyCell>
										<TableBodyCell>{hitem.entity_name}</TableBodyCell>
										<TableBodyCell>{hitem.tstamp}</TableBodyCell>
									</TableBodyRow>
								{/each}
							</TableBody>
						</TableSearch>
					</div>
				</Pane>

				<Pane size={35}>
					<div class="overflow-auto w-full h-full flex flex-col">
						<span>Indicator Detail Explanation</span>
						<p>bla bla bala 25%</p>
						{#each Array.from({ length: 30 }, (_, i) => i) as number}
							Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
							incididunt ut labore et dolore magna aliqua. {number}<br />
						{/each}
					</div>
				</Pane>
			</Splitpanes>
		</TabItem>

		<TabItem>
			<div slot="title" class="flex items-center gap-2">
				<UserCircleSolid size="sm" />
				Securities
			</div>
			<p class="text-sm text-gray-500 dark:text-gray-400 max-h-48">
				<b>Securities:</b>
				{#each Array.from({ length: 30 }, (_, i) => i) as number}
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
					ut labore et dolore magna aliqua. {number}<br />
				{/each}
			</p>
		</TabItem>
		<TabItem>
			<div slot="title" class="flex items-center gap-2">
				<ClipboardSolid size="sm" />
				TBots
			</div>
			<p class="text-sm text-gray-500 dark:text-gray-400 max-h-48">
				<b>TBots:</b>
				{#each Array.from({ length: 30 }, (_, i) => i) as number}
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
					ut labore et dolore magna aliqua. {number}<br />
				{/each}
			</p>
		</TabItem>

		<TabItem>
			<div slot="title" class="flex items-center gap-2">
				<GridSolid size="sm" />
				Dashboard
			</div>
			<p class="text-sm text-gray-500 dark:text-gray-400 max-h-48">
				<b>Dashboard:</b>
				{#each Array.from({ length: 30 }, (_, i) => i) as number}
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
					ut labore et dolore magna aliqua. {number}<br />
				{/each}
			</p>
		</TabItem>
	</Tabs>
</div>
